<template>
    <div  class="details" v-if="page">
        <div class="headnav">
            <div class="writer">
                <div class="userimg">
                    <img :src="page.user.avatar.large" alt="" class="auto-img">
                </div>
                <div class="name" @click="user(page.user.slug)">{{page.user.name}}</div>
                <div class="iconbox">
                    <div class="icon">
                        <img src="../assets/img/China.svg" alt="" class="auto-img">
                    </div>
                    <div class="icon">
                        <img src="../assets/img/pen.svg" alt="" class="auto-img">
                    </div>
                    <div class="icon">
                        <img src="../assets/img/V.svg" alt="" class="auto-img">
                    </div>
                    <div class="icon">
                        <img src="../assets/img/book.svg" alt="" class="auto-img">
                    </div>
                </div>
                <div class="fllow"  onselectstart ='return false' style="display: flex;" @click="follow">
                    <div class="btn" v-show="!page.care">关注</div>
                    <div class="btn con" v-show="page.care">已关注</div>
                </div>
            </div>
            <div class="mutual">
                <!-- 点赞状态样式 -->
                <!-- 禁止选中标签 onselectstart ='return false'-->
                <div onselectstart ='return false' :class="['box',{'blue':page.goods==1}]" @click="goods">
                    <div class="icon" v-show="page.goods==0">
                        <img src="../assets/img/good.png" alt="" class="auto-img">
                    </div>
                    <div class="icon" v-show="page.goods==1">
                        <img src="../assets/img/goodw.svg" alt="" class="auto-img">
                    </div>
                    <p>{{page.like_count}}</p>
                </div>
                <div @click="onSelect" onselectstart ='return false' class="box">
                    <div class="icon">
                        <img src="../assets/img/fenxiang.svg" alt="" class="auto-img">
                    </div>
                    <p>分享</p>
                </div>
                <!-- 收藏 -->
                <div @click="collect" onselectstart ='return false' class="box">
                    <div class="icon" v-show="!page.collect">
                        <img src="../assets/img/like.svg" alt="" class="auto-img">
                    </div>
                    <div class="icon" v-show="page.collect">
                        <img src="../assets/img/likes.svg" alt="" class="auto-img">
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container">
                <div class="mainbox">
                    <img :src="page.image.large" alt="">
                    <!-- <video src="https://www.djivideos.com/video_play/3890d254-1171-4b69-bb2d-00cea7ff6cf84"></video> -->
                </div>
                
            </div>
        </div>
        <div class="container">
            <div class="content_box">
                <div class="left">
                    <div class="title">
                        <div class="icon_title">
                            <img src="../assets/img/jingxuan.svg" alt="" class="auto-img">
                        </div>
                        <div class="title1">{{page.title}}</div>
                    </div>
                    <div class="subtitle">
                        <div class="icon">
                            <img src="../assets/img/day.svg" alt="" class="auto-img">
                        </div>
                        <p>{{page.created_at | Time}}</p>
                        <div class="icon">
                            <img src="../assets/img/eyes.svg" alt="" class="auto-img">
                        </div>
                        <p>{{page.view_count}}</p>
                        <div class="icon">
                            <img src="../assets/img/pyq.svg" alt="" class="auto-img">
                        </div>
                        <p class="con">{{page.equipment.name}}</p>
                        <div class="icon">
                            <img src="../assets/img/canshu.svg" alt="" class="auto-img">
                        </div>
                        <p class="con">拍摄参数</p>
                    </div>
                    <div class="line"></div>
                    <div class="intro">
                        {{page.description}}
                    </div>
                    <div class="ticket">
                        <div class="ticket_lit" v-for="(item,index) in page.ticket" :key="index">{{item}}</div>
                        
                    </div>
                    <div class="foot_title">版权所有 © 天云阁使用</div>
                    <div class="line"></div>
                    <div class="comment_title" v-if="Comment">
                        {{this.Comment.length}}条评论
                    </div>
                    <div class="commentbox">
                        <div class="userimg" v-if="!token" @click="tomy">
                            <img src="../assets/img/user.svg" alt="" class="auto-img">
                        </div>
                        <div class="userimg" v-if="token" @click="tomy">
                            <img src="../assets/img/myimg.jpg" alt="" class="auto-img">
                        </div>
                        <input ref="inp" type="text" @keyup.enter="say" placeholder="点击输入评论">
                        <div class="com_btn" @click="saybtn">评论</div>
                    </div>
                    <div class="comment">
                        <div class="user" v-for="(item) in Comment" :key="item.id">
                            <div class="userimg">
                                <img :src="item.user.avatar.medium" alt="" class="auto-img">
                            </div>
                            <div class="right">
                                <div class="top">
                                    <div class="name">{{item.user.name}}</div>
                                    <div class="time">{{item.created_at | Time}}</div>
                                </div>
                                <div class="main">{{item.content}}</div>
                                <div class="box">
                                    <div class="reply" @click="reply(item.id)">回复</div>
                                    <div v-if="item.user.name=='PIG' && token" class="reply" style="color:red;" @click="del(item.id)">删除</div>
                                </div>
                            </div>
                        </div>
                     
                    </div>
                </div>
                <div class="right">
                    <div class="hotbox">
                        <div class="title">热门活动</div>
                        <div class="hot" style="background-image:url(../assets/img/ia_1000007.jpg)">
                            <!-- <img src="../assets/img/pia_100000074.jpg" alt="" class="auto-img"> -->
                        </div>
                        <div class="hot" style="background-image:url(../assets/img/ia_1000008.jpg)">
                            <!-- <img src="../assets/img/pia_100000074.jpg" alt="" class="auto-img"> -->
                        </div>
                        <div class="hot" style="background-image:url(../assets/img/ia_1000002.jpg)">
                            <!-- <img src="../assets/img/pia_100000074.jpg" alt="" class="auto-img"> -->
                        </div>
                        
                    </div>
                    <div class="likebox">
                        <div class="title">你可能喜欢</div>
                        <div class="content">
                           <div class="likeimg"  style="background-image:url(../assets/img/ia_100000162.jpg)">
                                <!-- <img src="../assets/img/ia_100000162.jpg" alt="" class="auto-img"> -->
                            </div> 
                            <div class="intro">
                                <div class="tit">水上之路</div>
                                <div class="lit">Frozen影像</div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>
// import HeadNavbar from '@/components/HeadNavbar.vue'
import FootNavbar from '@/components/FootNavbar.vue'
import {  getLists  } from '../api/lists'; 
import {  getComment  } from '../api/comment'; 
    export default {
        components: {  FootNavbar },
        data() {
            return {
                Lists: null,//列表页数据
                page:null,//详情页数据
                Comment:[],//评论数据
                Collect:[],//收藏数据
                followdata:[],//关注数据
                token:window.localStorage.getItem("token")
            };
        },
        methods:{
            reply(id){
                let index=this.Comment.findIndex(item=>item.id==id);
                console.log(this.Comment[index].user.name);
                this.$refs.inp.value='@'+this.Comment[index].user.name+' ';
            },
            // 关注
            follow(){
                // 判断是否登录
                if(!this.token){
                    this.$message('登陆后再试试吧~');
                    this.$router.push("/record")
                    return
                }
                if(!this.page.care){
                    //用户id
                    let id = this.page.user.slug;
                    console.log(id);
                    // 遍历localstory 找到相同用户id发布的所有图文
                    this.Lists.forEach(item => {
                        if (item.user.slug == id) {
                            // 将id用户所有图文详情页的关注状态改变
                            item.care=true;
                            item.favorite_count+=1;
                        }
                    });
                    //去重
                    //寻找收藏数据id是否与当前页面数据id相等 
                    //找不到为-1表示收藏数据中不存在当前页面数据
                    var con=this.followdata.findIndex(item=>item.slug==this.page.slug);
                    if(con==-1){
                        this.followdata.push(this.page);
                        window.localStorage.setItem("followdata",JSON.stringify([this.followdata]));
                    }
                    this.$message.success('关注成功');
                    window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists])); 
                }else if(this.page.care){
                    //用户id
                    let userid = this.page.user.slug;
                    // 遍历localstory 找到相同用户id发布的所有图文
                    this.Lists.forEach(item => {
                        if (item.user.slug == userid) {
                            // 将id用户所有图文详情页的关注状态改变
                            item.care=false;
                            item.favorite_count-=1;
                        }
                    });
                    //当前图文id
                    let id =this.$route.query.id;
                    // 找到当前id所在数组下标的数据
                    let index = this.followdata.findIndex((item)=>item.slug==id);
                    this.followdata.splice(index,1);
                    window.localStorage.setItem("followdata",JSON.stringify([this.followdata]));
                    this.$message('取消关注');
                    //将数据存入local story中
                    window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
                }
            },
            // 跳转到作者个人中心
            user(id){
                console.log(id);
                this.$router.push("/user?id="+ id +"");
            },
            // 点赞功能
            goods(){
              // 判断是否登录
              let token = window.localStorage.getItem("token");
              if(!token){
                this.$message('登陆后再试试吧~');
                this.$router.push("/record")
                return
              }
              if(this.page.goods==0){
                // 改变点赞状态为1 已点赞为goods==1
                this.page.goods=1; 
                // 点赞数加1
                this.page.like_count+=1;
                //将数据存入local story中
                window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
              }else if(this.page.goods==1){
                this.page.goods=0;
                this.page.like_count-=1;
                window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
              }
            },
            // 收藏功能
            collect(){
            // 判断是否登录
              let token = window.localStorage.getItem("token");
              if(!token){
                this.$message('登陆后再试试吧~');
                this.$router.push("/record")
                return
              }

             if(!this.page.collect){
                 this.page.collect=true;
                //去重
                //寻找收藏数据id是否与当前页面数据id相等 
                //找不到为-1表示收藏数据中不存在当前页面数据
                var con=this.Collect.findIndex(item=>item.slug==this.page.slug);

                if(con==-1){
                    this.Collect.push(this.page);
                    window.localStorage.setItem("Collect",JSON.stringify([this.Collect]));
                }
                this.$message.success('收藏成功');
                window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists])); 
              }else if(this.page.collect){
                this.page.collect=false;
                //当前图文id
                let id =this.$route.query.id;
                // 找到当前id所在数组下标的数据
                let index = this.Collect.findIndex((item)=>item.slug==id);
                //删除当前下标数据
                this.Collect.splice(index,1);
                window.localStorage.setItem("Collect",JSON.stringify([this.Collect]));
                this.$message('取消收藏');
                //将数据存入local story中
                window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
              }
            },
            // 评论区头像
            tomy(){
              // 判断是否登录
              let token = window.localStorage.getItem("token");
              if(!token){
                this.$message('登陆后再查看吧~');
                this.$router.push("/record")
                return
              }
              this.$router.push("/my");
            },
            // 评论功能
            say(){
                if(!this.token){
                    this.$message('登陆后再评论吧~');
                    this.$router.push("/record")
                    return
                }
                // 输入框的内容
                var vle=this.$refs.inp.value
                // 内容不能为空
                if(!vle){
                    this.$message.error('内容不能为空哦~');
                    return
                }
                // 获取标准时间
                let time=new Date();
                //年月日时分秒
                let year = time.getFullYear();
                let y = time.getMonth() + 1;
                let d = time.getDate();
                let h = time.getHours();
                let min = time.getMinutes();
                let s =time.getSeconds();
                // 分钟和秒数<10则在前面加上0 01 02 03。。。
                min = min<10 ? "0" + min : min;
                s = s<10 ? "0" + s : s;
                // 发表评论
                this.Comment.push({
                    id:+new Date(),
                    user:{
                        name:"PIG",
                        avatar:{
                            // require将本地图片解析显示到页面
                            medium:require("../assets/img/myimg.jpg"),
                        }
                    },
                    content:vle,
                    created_at:year+'-'+y+'-'+d+'T'+h+':'+min+':'+s+'Z',
                })
                console.log(this.Comment);
                // 存入localstory
                window.localStorage.setItem("Comment",JSON.stringify([this.Comment]));
                // 清空输入框
                this.$refs.inp.value="";
            },
            // 评论按钮
            saybtn(){
                this.say();
            },
            // 评论删除
            del(id){
                let index = this.Comment.findIndex((item)=>item.id==id);
                this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.Comment.splice(index,1);
                window.localStorage.setItem("Comment",JSON.stringify([this.Comment]));
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            // 分享弹窗
            onSelect(){
            // 判断是否登录
              let token = window.localStorage.getItem("token");
              if(!token){
                this.$message('登陆后再试试吧~');
                this.$router.push("/record")
                return
              }
              this.$message.success('分享成功');
            },
            // 接送数据
            getListsFun(){
                getLists({id:this.$route.query.id}).then(data=>{
                    this.Lists=data.data.items;
                    for(let i=0;i<this.Lists.length;i++){
                    // 点赞状态goods
                    this.Lists[i].goods=0;
                    // 收藏collect
                    this.Lists[i].collect=false;
                    // 关注状态
                    this.Lists[i].care=false;
                    }
                    //当前图文id
                    let id =this.$route.query.id;
                    // 找到当前id所在数组下标的数据
                    let index = this.Lists.findIndex((item)=>item.slug==id);
                    // local story如果存在数据则使用localstory中的数据
                    if(window.localStorage.getItem("Listsnew")){
                        this.Lists=JSON.parse(window.localStorage.getItem("Listsnew"))[0];
                    }
                   
                    if(window.localStorage.getItem("Collect")){
                        this.Collect=JSON.parse(window.localStorage.getItem("Collect"))[0];
                    }
                    if(window.localStorage.getItem("followdata")){
                        this.followdata=JSON.parse(window.localStorage.getItem("followdata"))[0];
                    }
                    // 当前id的图文数据 最新数据
                    this.page=this.Lists[index];
                    })
            },
            // 接收评论区数据
            getCommentFun(){
                getComment().then(data=>{
                    this.Comment=data.data.items;
                    // 更新数据
                    if(window.localStorage.getItem("Comment")){
                        this.Comment=JSON.parse(window.localStorage.getItem("Comment"))[0];
                    }
                })
            }
        },
        //过滤器
        filters:{
            // 时间过滤
            Time(data){
                let t=data.split('T')[0].split("-");
                let s=data.split('T')[1].split("Z")[0].split(":");
                // 去除秒数
                let m=s[0]+':'+s[1];
                let time=t[1]+"月"+t[2]+"日"+" "+m;
                return time;
            }
        },
        created(){
            this.getListsFun();
            this.getCommentFun();
            this.$emit("login_local");
        },
       
        
    }
</script>

<style lang="scss" scoped>
.details{
    .headnav{
        height: 60px;
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .writer{
            display: flex;
            align-items: center;
            .userimg{
                height: 32px;
                width: 32px;
                border-radius: 50%;
                overflow: hidden;
            }
            .name{
                margin: 0 8px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
            }
            .iconbox{
                display: flex;
                .icon{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                    &:last-child{
                        margin-right: 8px;
                    }
                }

            }
            .btn{
                cursor: pointer;
                font-size: 14px;
                padding: 6px 15px;
                display: flex;
                justify-content: center;
                align-content: center;
                color: #fff;
                border-radius: 5px;
                background: linear-gradient(#40a9ff,#1890ff);
                &:hover{
                    background: linear-gradient(#69c0ff,#40a9ff);
                }
            }
            .con{
                color: #4b4b4b;
                background: #fff;
                border: 1px solid #ccc;
                box-sizing: border-box;
                &:hover{
                    background: rgba(0,0,0,.04);
                    color: rgba(0,0,0,.85)
                }
            }
        }
        .mutual{
            display: flex;
            font-size: 14px;
            .box{
                margin-left: 8px;
                padding: 6px 15px;
                display: flex;
                border: 1px solid #ccc;
                border-radius: 5px;
                cursor: pointer;
                &:hover{
                    background: rgba(0,0,0,.04);
                        color: rgba(0,0,0,.85)
                }
                .icon{
                    width: 13px;
                    height: 13px;
                    margin-top: 1px;
                    
                }
                p{
                    margin-left: 5px;
                }
            }
            
            .blue{
                background: linear-gradient(#40a9ff,#1890ff);
                color: #fff;
                &:hover{
                    background: linear-gradient(#69c0ff,#40a9ff);
                    color: #fff;
                }
            }
            
        }
    }
    .content{
        background-color: #f7f7f7;
        box-sizing: border-box;
        .mainbox{
            padding: 24px;
            display: flex;
            justify-content: center;
            height: 80vh;
        }
    }
    .content_box{
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        .left{
            width: 65%;
            .line{
                border-top:1px solid #eee;
                margin: 16px 0;
            }
            .title{
                display: flex;
                margin-bottom: 8px;
                .icon_title{
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                    margin-top: 1px;
                }
                .title1{
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            .subtitle{
                display: flex;
                .icon{
                    width: 16px;
                    height: 16px;
                }
                p{
                    font-size: 12px;
                    color: #999;
                    margin: 0 16px 0 4px;
                }
                p.con{
                    color: #1890ff;
                }
            }
            .intro{
                font-size: 14px;
                line-height: 25px;
                margin-bottom: 16px;
                color: rgba(0,0,0,.85);
            }
            .ticket{
                display: flex;
                flex-wrap: wrap;
                .ticket_lit{
                    padding:7px 10px;
                    color: rgba(0,0,0,.85);
                    background: rgba(0,0,0,.04);
                    font-size: 14px;
                    border-radius: 20px;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    transition: all 0.2s linear;
                    &:hover{
                      background: rgba(0,0,0,.08);  
                    }
                }
            }
            .foot_title{
                font-size: 12px;
                color: #999;
            }
            .comment_title{
                color: #4b4b4b;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 16px;
            }
            .userimg{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                margin-right: 8px;
                overflow: hidden;
            }
            .commentbox{
                cursor: pointer;
                display: flex;
                margin-bottom: 32px;
                input{
                    width: 664px;
                    height: 32px;
                    padding: 7px;
                    font-size: 12px;
                    box-sizing: border-box;
                    outline: none;
                    border: 1px solid #ccc;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
                .com_btn{
                    background: linear-gradient(#40a9ff,#1890ff);
                    color: #fff;
                    padding: 5px 20px;
                    font-size: 14px;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
            }
            .comment{
                .user{
                    display: flex;
                    margin-bottom: 10px;
                    .right{
                        .top{
                            display: flex;
                            margin-bottom: 8px;
                            .name{
                                font-size: 14px;
                                margin-right: 8px;
                            }
                            .time{
                                color: rgba(0,0,0,.45);
                                font-size: 12px;
                            }
                        }
                        .box{
                            display: flex;
                            cursor: pointer;
                        }
                        .main{
                            font-size: 14px;
                        }
                        .reply{
                            color: rgba(0,0,0,.45);
                            margin-top: 8px;
                            font-size: 12px;
                            margin-right: 5px;
                        }
                    }
                }
                
            }
        }
        .right{
   
            .hotbox{
                .title{
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 16px;
                }
                .hot{
                    width: 100%;
                    height: 184px;
                    margin-bottom: 16px;
                    background-size: cover;
                    background-position: 50%;
                }
            }
            .likebox{
                margin-top: 16px;
                .title{
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 16px;
                }
                .content{
                    margin-bottom: 16px;
                    display: flex;
                    background-color: #fff;
                    .likeimg{
                        width: 176px;
                        height: 120px;
                        background-size: cover;
                        background-position: 50%;
                    }
                    .intro{
                        width: 191px;
                        height: 120px;
                        padding-left: 16px;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .tit{
                            font-size: 16px;
                            font-weight: bold;
                            margin-bottom: 8px;
                        }
                        .lit{
                            font-size: 14px;    
                            color: rgba(0,0,0,.65);
                        }
                    }
                }
            }
        }
    }
}
</style>